<template>
	<view>
		<up-loading-page :loading="true" loadingText="loading..." v-if="showLoading"></up-loading-page>
	</view>

	<view class="layout" v-show="!showLoading">
		<cu-custom :isBack="true">
			<block slot="content">积分明细</block>
		</cu-custom>

		<!-- 明细 -->
		<view class="detail-zi">我的积分：{{ user_integral }}</view>

		<!-- 表格 -->
		<view class="detail-table">
			<view class="table-header">
				<view class="table-cell">时间</view>
				<view class="table-cell">动作</view>
				<view class="table-cell">积分</view>
				<view class="table-cell">余额</view>
			</view>
			<view class="table-row" v-for="(item, index) in records" :key="index" v-if="records.length > 0">
				<view class="table-cell">{{ item.time }}</view>
				<view class="table-cell">{{ item.action }}</view>
				<view class="table-cell">{{ item.points }}</view>
				<view class="table-cell">{{ item.balance }}</view>
			</view>
			<view v-else>
				暂无记录
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import request from '../../common/request';
	import api from '../../common/apiService';


	const {
		getIntegralDetail,
		getUserIntegral
	} = api;
	// 加载动画
	const showLoading = ref(true);
	const records = ref([]);
	const count = ref(0);
	const user_integral = ref(0);
	//流水对象的结构
	const record = {
		change_amount: '',
		change_type: '',
		create_time: '',
		remark: '',
		source_type: '',
		left_amount: ''
	};

	onMounted(async () => {
		const uid = uni.getStorageSync('uid');


		try {
			const [userIntegralDetail, userIntegral] = await Promise.all([getIntegralDetail(uid),
				getUserIntegral(uid)
			]);
			
			const list = userIntegralDetail.list;
			records.value = list.map((item) => {
				return {
					time: item.create_time,
					action: item.source_type,
					points: item.change_amount,
					balance: item.left_amount
				};
			});
			user_integral.value = userIntegral.user_integral;
		} catch (error) {
			uni.showToast({
				title: error.message || '请求失败，请稍后再试',
				icon: 'none'
			});
		} finally {
			showLoading.value = false;
		}
	});
</script>

<style scoped lang="scss">
	.layout {
		.detail-zi {
			width: 750rpx;
			height: 100rpx;
			line-height: 100rpx;
			padding-left: 23rpx;
			// border: 1px solid;
		}

		// .detail-table {
		// 	width: 720rpx;
		// 	height: auto;
		// 	margin: 0 16rpx 0 14rpx;
		// 	border: 1px solid red;
		// }
		.table {
			display: flex;
			flex-direction: column;
			margin: 20rpx;
		}

		.table-header,
		.table-row {
			display: flex;
			justify-content: space-between;
			color: #323232;
			font-weight: 500;
		}

		.table-cell {
			flex: 1;
			padding: 12rpx;
			// border: 1px solid #ccc;
			text-align: left;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.table-header {
			background-color: #f2f2f2;
		}

	}
</style>